<?php
use yii\helpers\Url;
?>
<div class="row-content am-cf">
    <div class="row">

        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">新增兑换分类</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div class="widget-body am-fr">

                    <form class="am-form tpl-form-border-form tpl-form-border-br" action="<?=Url::to(['exchange-item/add-item'])?>" method="post" enctype="multipart/form-data">
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">名称</label>
                            <div class="am-u-sm-9">

                                <input type="text" class="tpl-form-input" name="title" id="title" placeholder="请输入产品名称">

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-phone" class="am-u-sm-3 am-form-label">兑换类型 </label>
                            <div class="am-u-sm-9">
                                <select data-am-selected="{searchBox: 0}" name="type" id="type" style="display: none;">
                                    <option value="1">蓝积分</option>
                                    <option value="0">绿积分</option>
                                </select>

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">所需积分</label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input" name="price" id="price" placeholder="请输入所需积分">

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-phone" class="am-u-sm-3 am-form-label">分类 </label>
                            <div class="am-u-sm-9">
                                <select data-am-selected="{searchBox: 0}" name="cate_id" id="cate_id" style="display: none;">
                                    <?php foreach ($cates as $cate){?>
                                        <option value="<?=$cate['id']?>"><?=$cate['title']?></option>
                                    <?php }?>
                                </select>

                            </div>
                        </div>
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">库存</label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input" name="num" id="num" placeholder="请输入库存">

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-weibo" class="am-u-sm-3 am-form-label">封面图 </label>
                            <div class="am-u-sm-9 ">
                                <div class="am-form-group am-form-file">
                                    <div class="tpl-form-file-img">
                                        <img id="xmTanImg" style="width: 300px;height: 300px;" src="assets/img/a5.png" alt="">
                                    </div>
                                    <button type="button" class="am-btn am-btn-danger am-btn-sm ">
                                        <i class="am-icon-cloud-upload"></i> 添加封面图片</button>
                                    <input id="doc-form-file" name="cover" type="file" multiple="">
                                </div>

                            </div>
                        </div>

                        <script type="text/javascript" charset="utf-8" src="/assets/ue/ueditor.config.js"></script>
                        <script type="text/javascript" charset="utf-8" src="/assets/ue/ueditor.all.min.js"> </script>
                        <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
                        <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
                        <script type="text/javascript" charset="utf-8" src="/assets/ue/lang/zh-cn/zh-cn.js"></script>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">库存</label>
                            <div class="am-u-sm-9">
                                <script id="editor" type="text/plain" style="width:320px;height:500px;"></script>

                            </div>
                        </div>

                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button id="sub" type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
                            </div>
                        </div>
                    </form>
                    <script>
                                function xmTanUploadImg(obj) {
                                    var file = obj.files[0];

                                    console.log(obj);console.log(file);
                                    console.log("file.size = " + file.size);  //file.size 单位为byte

                                    var reader = new FileReader();

                                    //读取文件过程方法
                                    reader.onloadstart = function (e) {
                                        console.log("开始读取....");
                                    }
                                    reader.onprogress = function (e) {
                                        console.log("正在读取中....");
                                    }
                                    reader.onabort = function (e) {
                                        console.log("中断读取....");
                                    }
                                    reader.onerror = function (e) {
                                        console.log("读取异常....");
                                    }
                                    reader.onload = function (e) {
                                        console.log("成功读取....");

                                        var img = document.getElementById("xmTanImg");
                                        img.src = e.target.result;
                                        //或者 img.src = this.result;  //e.target == this
                                    }

                                    reader.readAsDataURL(file)
                                }
                        $("#doc-form-file").change(function(){
                            xmTanUploadImg(this);
                        })
                        var ue = UE.getEditor('editor');

                            </script>
                                <script>
                        $("#sub").click(function(){

                           $("form").submit();
                        })

                    </script>
                </div>
            </div>
        </div>
    </div>
</div>